<!-- 文件夹详情 -->
<template>
  <div class="folder-detail-container">
    <div class="folder-detail-content">
      <div class="f-info">
        <div class="f-info__statistics">
          <div class="f-info__statistics_title">
            基本信息
          </div>

          <div class="f-info__statistics_content">
            <div class="f-info__statistics_item">
              <div class="f-info__statistics_item_num">{{ nodeInfo.name }}</div>
              <div class="f-info__statistics_item_name">{{ $t('basic.name') }}</div>
            </div>
            <div class="f-info__statistics_item">
              <div class="f-info__statistics_item_num">{{ nodeInfo.data.updateTime || '暂无' }}</div>
              <div class="f-info__statistics_item_name">{{ $t('basic.updateTime') }}</div>
            </div>
            <div class="f-info__statistics_item">
              <div class="f-info__statistics_item_num">{{ nodeInfo.data.createTime }}</div>
              <div class="f-info__statistics_item_name">{{ $t('basic.createTime') }}</div>
            </div>
            <div class="f-info__statistics_item">
              <div class="f-info__statistics_item_word">
                {{ nodeInfo.data.scenarioDescription }}
              </div>
              <div class="f-info__statistics_item_name">{{ $t('basic.describe') }}</div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {},
      selectedNodeInfo: {}, // 当前选中节点的信息
    }
  },
  components: {
  },
  props: {
    nodeInfo: {
      type: Object,
    }
  },

  mounted() {
    this.form = this.nodeInfo.data;
  },

  methods: {
    submitForm() { },
    enterExperiment() {
      this.$router.push({ name: "experimentBuild", query: { experimentId: this.nodeInfo.id } })
    },
  }
}

</script>

<style lang="scss" scoped>
.folder-detail-container {
  width: 100%;
  height: 65%;
  box-sizing: border-box;

  .folder-detail-content {
    width: 100%;
    height: 85%;
    display: flex;
    margin-top: 20px;
    justify-content: space-around;
    box-sizing: border-box;

    .f-info {
      width: 80%;

      .f-info__statistics {
        border-radius: 5px;
        padding: 10px 20px;
        background-color: var(--ui-component-background-alt);
        margin-bottom: 30px;

        .f-info__statistics_title {
          font-size: var(--ui-font-size-base);
        }

        .f-info__statistics_content {
          display: flex;
          justify-content: space-between;
          margin-top: 20px;
          flex-wrap: wrap;

          .f-info__statistics_item {
            .f-info__statistics_item_num {
              color: var(--ui-text-color);
              font-size: var(--ui-font-size-title);
            }

            .f-info__statistics_item_word {
              font-size: var(--ui-font-size-base);
              color: var(--app-text-fg-low);
            }

            .f-info__statistics_item_name {
              font-size: var(--ui-font-size-sm);
              color: var(--app-text-fg-low);
              margin-top: 10px;
              margin-bottom: 20px;

            }
          }

          & :last-child {
            width: 100%;
          }
        }

      }

    }
  }
}
</style>